<template>
    
    <!-- 组件的模板 -->
    <div class="topbar">
        <span class="date"><span class="icon-calendar"></span>2016年11月07日</span>
    </div>

    <div class="weui-cells__title">工作日期</div>
    <!-- 按日期设置 -->
    <div class="weui-cells" v-if="pageData.data.work_date_type == 0">
        <div class="weui-cell" v-for="item in workDateArr">
            <div class="weui-cell__hd"></div>
            <div class="weui-cell__bd">
                <p>{{item}}</p>
            </div>
        </div>
    </div>
    <!-- 按周设置 -->
    <div v-if="pageData.data.work_date_type == 1">
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label for="" class="weui-label">开始时间</label>
                </div>
                <div class="weui-cell__bd">
                    {{pageData.data.work_week.start_date}}
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label for="" class="weui-label">结束时间</label>
                </div> 
                <div class="weui-cell__bd">
                    {{pageData.data.work_week.end_date}}
                </div>
            </div>
        </div>
        <div class="weui-cells">
            <div class="weui-cell" track-by="$index" v-for="item in workWeekArr">
            <div class="weui-cell__hd"></div>
            <div class="weui-cell__bd">
                <p>星期{{item}}</p>
            </div>
            <div class="weui-cell__ft"><i class="weui-icon-success-no-circle"></i></div>
        </div>
    </div>

    <div class="weui-cells__title">工作时间</div>
    <!-- 弹性工作制 -->
    <div v-if="pageData.data.work_type == 1">
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label for="" class="weui-label">弹性工作制</label>
                </div>
                <div class="weui-cell__bd">
                    每天至少工作{{pageData.data.work_time_length}}小时
                </div>
            </div>
        </div>
    </div>
    <!-- 固定时段 -->
    <div v-if="pageData.data.work_type == 0">
        <div class="weui-cells my-cells" v-for="item in pageData.data.work_time_range">
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label for="" class="weui-label">上班时间</label>
                </div>
                <div class="weui-cell__bd">
                    {{item.start_time}}
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label for="" class="weui-label">下班时间</label>
                </div> 
                <div class="weui-cell__bd">
                    {{item.time}}
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {

        },
        data: function(){
            return{
                pageData: {
                    errno: 0,
                    errmsg: "success",
                    data: {
                        id: 1,
                        project_id: 1,
                        name: "华为手机协助考勤",
                        work_type: 0,
                        work_time_length: 8,
                        work_date_type: 1,
                        work_date: "2016-11-1,2016-11-2,2016-11-3,2016-11-8,2016-11-9,2016-11-10",
                        work_week: {
                            start_date: "2016-11-1",
                            end_date: "2016-11-11",
                            week: "1,3,5",
                        },
                        remind_time:5,
                        require_field: {"photo":0,"position":1,"remark":0},
                        notice_type:1,
                        create_uid:1,
                        create_time: 1477050865,
                        update_time: 1477050865,
                        status: "1",
                        participant_group: "1,2,3,4,5",
                        participant_user: "1,2,3,4,5",
                        position: [
                            {
                                name: "八维学校北门",
                                address: "马连洼100号",
                                coordinate: "116.399957,39.91095"
                            },
                            {
                                name: "八维学校南门",
                                address: "马连洼101号",
                                coordinate: "116.399957,39.91095"
                            }
                        ],
                        work_time_range:[
                            {
                                start_time: "8:30",
                                time: "11:30"
                            },
                            {
                                start_time: "12:30",
                                time: "18:30"
                            },
                            {
                                start_time: "20:00",
                                time: "22:30"
                            }
                        ]
                    }
                }
            }
        },
        computed: {
            workDateArr: function(){
                return this.pageData.data.work_date.split(',')
            },
            workWeekArr: function(){
                let wa = this.pageData.data.work_week.week.split(',')
                return wa.map((o, i, a) => {
                    switch(o){
                        case '1':
                            return '一'
                        break
                        case '2':
                            return '二'
                        break
                        case '3':
                            return '三'
                        break
                        case '4':
                            return '四'
                        break
                        case '5':
                            return '五'
                        break
                        case '6':
                            return '六'
                        break
                        case '7':
                            return '七'
                        break
                    }
                })
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                
                
                
            }
        },
        created(){

            this.init();
            
        }
        
    }  
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/attendance.css"></style>
<style>
    .page.padding {
         padding: 0;
    }
    .topbar {
        width: 100%;
        height: 44px;
        background: #fff;
        position: inherit;
        left: 0;
        top: 0;
        line-height: 44px;
        padding: 0 12px;
        box-sizing: border-box;
    }
    .weui-cells {
        margin-top: 0;
        background-color: #FFFFFF;
        line-height: 1.17647059;
        font-size: 16px;
        overflow: hidden;
        position: relative;
    }
    .weui-icon-success-no-circle {
        font-size: 23px;
        color: #fa0;
    }
    .my-cells{
        margin-bottom: 20px;
    }
</style>



